<template>
    <el-dialog :title="title" width="max-content" :visible.sync="show" center :before-close="cancel">
        <div>
            <el-select class="business-classify_select" style="width: 100%;" v-model="ids" placeholder="请选择分类" multiple @change="handleClassifyChange" filterable clearable>    
                <el-option v-for="item in list" :value="item.id" :label="item.name" :key="item.id">
                    <div class="business-classify_name" v-html="item.name">
                        
                    </div>
                </el-option>
            </el-select>
        </div>
        <div slot="footer">
            <el-button @click="confirm" type="primary">
                确定
            </el-button>
            <el-button @click="cancel">
                取消
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        },
        classifyIds:{
            type: Array,
            default: () => []
        },
        show: {
            type: Boolean,
        },
        title: {
            type: String,
            value: "设置自定义分类"
        },
    },
    model: {
        event: 'showDialog',
        prop: 'show',
    },
    watch: {
        classifyIds(val){
            this.ids = val
            this.handleClassifyChange()
        },
    },
    data() {
        return {
            ids: ""
        }
    },
    methods: {
        // select里面显示的是html代码需要转化一下
        handleClassifyChange(){
           
            this.$nextTick(()=>{
                const {list,ids} = this
                const els = document.querySelectorAll('.business-classify_select .el-select__tags-text')
                ids.forEach((item,index)=>{
                    const obj = list.find(item2=>item2.id==item)
                    els[index].innerHTML =  obj.name
                })
            })
            
        },
        confirm() {
            this.$emit('confirm',this.ids)
            this.$emit("showDialog", false)
        },
        cancel() {
            this.$emit("showDialog", false)
        }
    },



}
</script>

<style lang="scss" scoped>
.stock-wrapper {
    width: 300px;
    display: flex;
    align-items: center;

    .label {
        width: 50px;
    }
}
.business-classify_name,.business-classify_select{
    ::v-deep p{
      margin: 0;
       img{
        vertical-align: middle;
        height: 16px;
        width: auto;
      }
    }
  }
</style>